<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>发帖</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"
          href="../../static/layui/css/layui.css"/>
    <link rel="stylesheet" th:href="@{/styles/home.css}"
          href="../../static/styles/home.css"/>
    <link rel="stylesheet" th:href="@{/styles/articles/index.css}"
          href="../../static/styles/articles/index.css"/>
    <link rel="stylesheet" th:href="@{/resources/editor.md/css/editormd.css}"
          href="../../static/resources/editor.md/css/editormd.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- header start -->
    <div th:replace="/share/_header :: header(2)"></div>
    <!-- header end -->
    <div class="layui-body body-content">
        <div role="main" class="container" style="margin-top: 1rem;">
            <div class="row">
                <div class="col-sm-9 blog-main">
                    <form id="title" action="/posts" method="post" onsubmit="return savePost();">
                        <input type="hidden" name="editMode" value="MARKDOWN">

                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label for="type">类型</label>
                                <select class="form-control" id="type" name="type">
                                    <option value="POST">发帖</option>
                                    <option value="ANSWER">回答</option>
                                    <option value="QUESTION">提问</option>
                                    <option value="SHARE">提问</option>
                                </select>
                            </div>
                            <div class="form-group col-md-9">
                                <label for="title">标题</label>
                                <input type="text" class="form-control" name="title" id="title" placeholder="title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="content">内容</label>
                            <div id="editormd">
                                <textarea class="form-control" name="content" id="content" rows="3"></textarea>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </form>
                </div>
                <!--  style="padding-top: 1rem;" -->
                <aside class="col-sm-3 ml-sm-auto blog-sidebar">
                    <div class="sidebar-module sidebar-module-inset">
                        <h4>发贴须知</h4>
                        <p>
                            Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras
                            mattis consectetur purus sit amet fermentum. Aenean lacinia
                            bibendum nulla sed consectetur.
                        </p>
                    </div>
                    <div class="sidebar-module">
                        <h4>Archives</h4>
                        <ol class="list-unstyled">
                            <li><a href="#">March 2014</a></li>
                            <li><a href="#">February 2014</a></li>
                            <li><a href="#">January 2014</a></li>
                            <li><a href="#">December 2013</a></li>
                            <li><a href="#">November 2013</a></li>
                            <li><a href="#">October 2013</a></li>
                        </ol>
                    </div>
                    <div class="sidebar-module">
                        <h4>Elsewhere</h4>
                        <ol class="list-unstyled">
                            <li><a href="#">GitHub</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Facebook</a></li>
                        </ol>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/layui/layui.js}" src="../../static/layui/layui.js" charset="utf-8"></script>
<script th:src="@{/resources/editor.md/editormd.js}" src="../../static/resources/editor.md/editormd.js"
        charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['element', 'layer']);

    var editor = editormd("editormd", {
        width: "100%",
        height: 520,
        path: "/resources/editor.md/lib/",
        htmlDecode: "style,script,iframe",
        tex: true,
        taskList: true,
        flowChart: true,
        sequenceDiagram: true,
        watch: false,
        emoji: true,
        saveHTMLToTextarea: true,
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        toolbarIcons: function () {
            return [
                "undo", "redo", "|",
                "bold", "del", "italic", "quote", "|",
                "h1", "h2", "h3", "h4", "h5", "h6", "|",
                "list-ul", "list-ol", "hr", "|",
                "image", "link", "code", "code-block", "emoji", "||",
                "fullscreen", "watch", "preview", "clear"
            ]
        }
    });

    function savePost() {
        var form = event.target;
        if (form.title.value.length == 0) {
            layui.layer.msg('文章标题不能为空');
            return false;
        }
        // console.log(form.content.value);
        if (form.content.value.length == 0) {
            layui.layer.msg('文章内容不能为空');
            return false;
        }

        return true;
    }
</script>
</body>
</html>